// 排行榜页面js
// 加载模块
layui.use(
  ["element", "form", "layedit", "upload", "laydate", "layer", "table", "flow"],
  function() {
    var $ = layui.jquery,
      element = layui.element,
      form = layui.form,
      laydate = layui.laydate,
      layer = layui.layer,
      table = layui.table,
      flow = layui.flow;

    // 全局控制变量 0：积分  1：学习时长
    var realType = 0;

    // 积分、学习时长选项卡切换并重载数据表格
    window.changeType = function(type) {
      realType = type;
      lazyLoad(realType);
    };

    // 将下拉框选择的值填入到select输入框中
    form.on("select(toprankselect)", function(data) {
      $("#toprankinput").val(data.value);
      // 当取toprankinput框里面的值的时候，判断是否为'''
      // alert('下拉框选取的值：' + $('#toprankinput').val()); // 测试输出
      $("#toprankselect")
        .next()
        .find("dl")
        .css({
          display: "none"
        });
      form.render();
      // 下拉框选取值时调用数据表格重载方法
      changeType(realType);
    });

    // 实现被input框覆盖掉的select框的搜索功能
    window.search = function() {
      var value = $("#toprankinput").val();
      $("#toprankselect").val(value);
      form.render();
      $("#toprankselect")
        .next()
        .find("dl")
        .css({
          display: "block"
        });
      var dl = $("#toprankselect")
        .next()
        .find("dl")
        .children();
      var j = -1;
      for (var i = 0; i < dl.length; i++) {
        if (dl[i].innerHTML.indexOf(value) <= -1) {
          dl[i].style.display = "none";
          j++;
        }
        if (j == dl.length - 1) {
          $("#toprankselect")
            .next()
            .find("dl")
            .css({
              display: "none"
            });
        }
      }
      // 监听enter键触发事件，若按下enter，则隐藏select下拉框
      $(document).keyup(function(event) {
        if (event.keyCode == 13) {
          $("#toprankselect")
            .next()
            .find("dl")
            .css({
              display: "none"
            });
        }
      });
    };

    // 输入弹窗提示
    window.showTips = function(msg, obj) {
      layer.tips("<span style='color:red'>" + msg + "</span>", obj, {
        tips: [3, "#fff"],
        time: 1000
      });
    };

    // 校验输入的排行数据是否符合要求
    window.check = function(obj) {
      var value = obj.value; // js取得输入的值
      var rankRegexp = /^[0-9]*$/;
      if (!rankRegexp.test(value)) {
        layer.tips("输入数据不合要求，请重新输入", obj, {
          tips: 3,
          anim: 6
        });
      } else {
        // 按下enter键时调用数据表格重载方法
        changeType(realType);
      }
      // 测试输出
      // alert('回车后从input框获取的值：' + $('#toprankinput').val());
    };

    // 重写日期格式化方法
    Date.prototype.toLocaleString = function() {
      return (
        this.getFullYear() +
        "-" +
        ("0" + (this.getMonth() + 1)).slice(-2) +
        "-" +
        String(this.getDate()).padStart(2, 0)
      );
    };

    // 格式化日期
    var date = new Date();
    var now = date.toLocaleString(); // 今天
    var firstWeekDay = new Date(
      date.setDate(date.getDate() - (date.getDay() || 7) + 1)
    ).toLocaleString(); // 本周第一天
    var firstMonthDay = new Date(date.setDate(1)).toLocaleString(); // 本月第一天

    // 日期选择控件加载
    window.useLaydate = function(startTime) {
      laydate.render({
        elem: "#time_choose",
        type: "date",
        range: true,
        trigger: "click",
        value: startTime + " - " + now, // 初始化日期选择栏日期
        min: "2000-01-01",
        max: now, // 允许选择的日期最大到今天
        calendar: true,
        done: function(value, date, endDate) {
          // value: 日期生成的值，如'2000-01-01 - 2020-01-06'
          // date: 开始日期时间对象，如'{year: 2017, month: 8, date: 18}'，使用方法如 alert(date.month)
          // endDate: 结束的日期时间对象
          // layer.msg(value + '', {
          //     icon: 1,
          //     offset: 'auto',
          //     anim: 4
          // });
          // 当日期选择控件加载时，调用数据表格重载方法
          changeType(realType);
        }
      });
      // 模拟点击laydate控件，延迟1ms
      setTimeout(function() {
        $("#time_choose").click();
      }, 1);
      // 模拟点击确定button，延迟1ms
      setTimeout(function() {
        $(".laydate-btns-confirm").click();
      }, 1);
    };

    // 日期选择空间初始化渲染，初步渲染为 本月
    useLaydate(firstMonthDay);

    // 通过button改变日期范围
    window.changeDate = function(num) {
      // 移除元素，重新加载
      $("#time_choose").remove();
      $("#time_input").html(
        '<input type="text" class="layui-input" id="time_choose" placeholder=" - ">'
      );
      // 快捷选择日期-重新渲染laydate组件
      switch (num) {
        case 1:
          useLaydate(now);
          break;
        case 2:
          useLaydate(firstWeekDay);
          break;
        case 3:
          useLaydate(firstMonthDay);
          break;
        case 4:
          useLaydate("2000-01-01");
          break;
        default:
          break;
      }
    };

    var scrollAction = {
        x: "undefined",
        y: "undefined"
      },
      scrollDirection;

    // 判断当前页面滚动方向
    function scrollFunc() {
      if (typeof scrollAction.x == "undefined") {
        scrollAction.x = window.pageXOffset;
        scrollAction.y = window.pageYOffset;
      }
      var diffX = scrollAction.x - window.pageXOffset;
      var diffY = scrollAction.y - window.pageYOffset;
      if (diffX < 0) {
        // Scroll right
        scrollDirection = "right";
      } else if (diffX > 0) {
        // Scroll left
        scrollDirection = "left";
      } else if (diffY < 0) {
        // Scroll down
        scrollDirection = "down";
      } else if (diffY > 0) {
        // Scroll up
        scrollDirection = "up";
      } else {
        // First scroll event
      }
      scrollAction.x = window.pageXOffset;
      scrollAction.y = window.pageYOffset;
    }

    // 判断元素是否在可视区域
    function getScrollTop() {
      return (
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        0
      );
    }

    // 监听页面滚动事件
    $(document).scroll(function() {
      scrollFunc();
      var top = $("#top")[0];
      var topScroll = getScrollTop();
      // layer.msg(topScroll + '')
      if (scrollDirection == "down") {
        if (topScroll >= 110) {
          // 若top栏不在屏幕可视区域内，则改变其属性使其脱离文档流，相对于浏览器定位
          $("#top").attr(
            "style",
            "position: fixed; top: -10px; z-index: 101; width: 96.7%; left: 0px; padding: 0 20px; background-color: aliceblue;opacity: 0.95;"
          );
          $("#lay_table").attr("style", "margin-top: 215px;");
        } else {
          $("#lay_table").attr("style", "margin-top: 0px;");
        }
      } else if (scrollDirection == "up") {
        if (topScroll <= 1) {
          // 若top栏在屏幕可视区域内，则设置其属性为静态，不脱离文档流
          $("#top").attr(
            "style",
            "position: static; z-index: 101; width: 100%; left: 0px; background-color: white;"
          );
        }
        $("#lay_table").attr("style", "margin-top: 0px;");
      }
    });

    // 时间转换方法，将秒转为时分秒
    window.transferTime = function(time) {
      return Math.floor(time / 3600) + "小时" + Math.floor(Math.floor(time % 3600) / 60) + "分" + (time % 60) + "秒";
    }

    // 数据表格懒加载
    function lazyLoad(type) {
      // 处理筛选条件参数
      var topNum = $("#toprankinput").val(); // 前n名，页面初始化时为空字符串 ''
      var dateRange = $("#time_choose").val(); // 时间范围，页面初始化时为本月
      var limit = 12; // 每次加载展示的数据条数
      // var message =
      //   (topNum == "" ? "topNum:&emsp;空" : "topNum:&emsp;" + topNum) +
      //   "<br>" +
      //   "日期区间:&emsp;" +
      //   dateRange +
      //   "<br>" +
      //   "realType:&emsp;" +
      //   (realType == 0 ? "积分" : "学习时长");
      // layer.msg(message, {
      //   icon: 1,
      //   offset: "auto",
      //   anim: 3
      // });
      //重新初始化表头
      if ($("#rank_table").html() != null) {
        $("#rank_table").html(
          "<thead>" +
            "<tr>" +
            "<th></th>" +
            "<th>排名</th>" +
            "<th>学员</th>" +
            "<th>" +
            (realType == 0 ? "积分值" : "学习时长") +
            "</th>" +
            "</tr> " +
            "</thead>"
        );
      }
      //渲染数据
      flow.load({
        elem: "#rank_table", //指定列表容器
        done: function(page, next) {
          //到达临界点（默认滚动触发），触发下一页
          var lis = [];
          var url;
          //动态选择后端路径
          if (type == 0) {
            url = "/admin/archives/listIntegralRanking";
          } else {
            url = "/admin/archives/listDurationRanking";
          }
          //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
          $.get(
            url +
              "?page=" +
              page +
              "&topNum=" +
              topNum +
              "&dateRange=" +
              dateRange +
              "&limit=" +
              limit,
            function(res) {
              //遍历，拼接数据
              layui.each(res.data, function(index, item) {
                //奖杯
                var trophy;
                switch (item.rank) {
                  case 1:
                    trophy =
                      "<img src='/backend/image/first_medal.png' height=30/>";
                    break;
                  case 2:
                    trophy =
                      "<img src='/backend/image/second_medal.png' height=30/>";
                    break;
                  case 3:
                    trophy =
                      "<img src='/backend/image/third_medal.png' height=30/>";
                    break;
                  default:
                    trophy = "";
                    break;
                }

                lis.push(
                  "<tr>" +
                    "<td style='text-align:right;border-right:0px;'>" +
                    trophy +
                    "</td>" +
                    "<td>第" +
                    item.rank +
                    "名</td>" +
                    "<td>" +
                    item.userName +
                    "</td>" +
                    "<td>" +
                    (realType == 0 ? item.totalIntegral : transferTime(item.totalDuration)) +
                    "</td>" +
                    "</tr>"
                );
              });
              //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
              //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
              //通过总条数，与每页条数计算得到
              var pages;
              if (res.count % limit == 0) {
                pages = res.count / limit;
              } else {
                pages = Math.ceil(res.count / limit);
              }
              next(lis.join(""), page < pages);
            }
          );
        }
      });
    }

    // 导出排行榜数据
    window.exportData = function() {
      // 当前选项卡排行榜展示类型
      var headType = realType == 0 ? "积分值" : "学习时长";
      var topNum = $("#toprankinput").val(); // 前n名，页面初始化时为空字符串 ''
      var dateRange = $("#time_choose").val(); // 时间范围，页面初始化时为本月
      $.ajax({
        url:
          "/admin/archives/" +
          (realType == 0 ? "exportIntegralRanking" : "exportDurationRanking"),
        method: "get",
        data: {
          topNum: topNum,
          dateRange: dateRange
        },
        dataType: "json",
        success: function(res) {
          data = []; // 初始化数组
          layui.each(res.data, function(index, item) {
            data.push([
              item.rank,
              item.userName,
              realType == 0 ? item.totalIntegral : transferTime(item.totalDuration)
            ]);
          });
          // 提示选择导出数据类型
          var exportType = "";
          var index = layer.confirm(
            "请选择导出类型",
            {
              title: "提示",
              icon: 6,
              btn: ["csv", "excel表格"],
              anim: 3
            },
            function() {
              exportType = "csv";
              table.exportFile(["排名", "学员", headType], data, exportType);
              layer.close(index);
            },
            function() {
              exportType = "xls";
              table.exportFile(["排名", "学员", headType], data, exportType);
              layer.close(index);
            }
          );
        }
      });
    };
  }
);

// 加载jquery依赖
document.write(
  '<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>'
);

var opacityMouseLeave = 0.5; //当鼠标不在按钮上时，按钮的不透明度，从 0.0（完全透明）到 1.0（完全不透明）
var opacityMouseEnter = 0.8; //当鼠标在按钮上时，按钮的不透明度，从 0.0（完全透明）到 1.0（完全不透明）
var goTopBottomButton = document.createElement("div");
goTopBottomButton.className = "goTopBottomButton";
goTopBottomButton.innerHTML =
  "<img class='toggleButton' style='width:35px;height:35px;display:block;cursor:pointer;'></img>"; //图片的宽和高可修改，原始图片宽高均为 40px
goTopBottomButton.style.position = "fixed"; // 按钮位置固定
goTopBottomButton.style.zIndex = 10000; // 按钮堆叠顺序，数字越大，越显示在前面
goTopBottomButton.style.bottom = "40px"; //距离网页底部
goTopBottomButton.style.right = "20px"; //距离网页右边
var toggleButton = goTopBottomButton.lastChild;
toggleButton.style.opacity = opacityMouseLeave; //按钮初始不透明度
toggleButton.src = "/backend/image/down_button_icon.png"; //按钮初始显示向下的图片
document.getElementsByTagName("body")[0].appendChild(goTopBottomButton); // 将按钮添加到网页中

var $ = window.$;
var canScrollMouseOver = false; //当鼠标在按钮上，但未点击时，页面能否自动滚动，true 为可以自动滚动，false 为不能自动滚动
var clickScrollTime = 500; //点击按钮时，网页滚动到顶部或底部需要的时间，单位是毫秒
var needScrollTime; //网页可以自动滚动时，滚动需要的时间，由网页高度计算得出，这样不同网页都会匀速滚动
var isClicked = false; //按钮是否被点击
var initialHeight = 0; //网页向底部滚动时，需要滚动的距离
var scrollDirection = "down"; //网页滚动方向，down 为向下，up 为向上
var loadTimes = 0; //网页中动态增加数据的次数
var maxLoadTimes = 10; //最大的动态增加数据的次数，如果动态增加数据的次数超过这个值，则说明当前网页不适合执行此脚本，建议将其加入排除的网站当中
toggleButton.addEventListener("mouseenter", function() {
  //鼠标移入时不透明度改变，如果 canScrollMouseOver 为 true，则网页可以自动滚动
  isClicked = false;
  if (canScrollMouseOver) {
    if (scrollDirection == "up") {
      needScrollTime = getScrollTop() * 10;
      $("html,body").animate(
        {
          scrollTop: "0px"
        },
        needScrollTime
      );
    } else {
      initialHeight = $(document).height();
      var restHeight = $(document).height() - getScrollTop();
      needScrollTime = restHeight * 10;
      $("html,body").animate(
        {
          scrollTop: initialHeight
        },
        needScrollTime,
        continueToBottom
      );
    }
  }
  toggleButton.style.opacity = opacityMouseEnter;
});

// 鼠标移出时不透明度改变，如果 canScrollMouseOver 为 true，并且按钮未被点击，停止网页自动滚动的动画
toggleButton.addEventListener("mouseleave", function() {
  if (canScrollMouseOver && !isClicked) {
    $("html,body").stop();
  }
  toggleButton.style.opacity = opacityMouseLeave;
});

//点击按钮时，网页滚动到顶部或底部
toggleButton.addEventListener("click", function() {
  isClicked = true;
  if (canScrollMouseOver) {
    $("html,body").stop();
  }
  if (scrollDirection == "up") {
    $("html,body").animate(
      {
        scrollTop: "0px"
      },
      clickScrollTime
    );
  } else {
    initialHeight = $(document).height();
    $("html,body").animate(
      {
        scrollTop: initialHeight
      },
      clickScrollTime,
      continueToBottom
    );
  }
});

// 获取垂直方向滑动距离
function getScrollTop() {
  var scrollTop = 0;
  if (document.documentElement && document.documentElement.scrollTop) {
    scrollTop = document.documentElement.scrollTop;
  } else if (document.body) {
    scrollTop = document.body.scrollTop;
  }
  return scrollTop;
}

// 判断页面是否继续下滑，数据表格懒加载会一直向下加载直到加载完所有数据
function continueToBottom() {
  var currentHeight = $(document).height();
  if (initialHeight != currentHeight) {
    if (loadTimes >= maxLoadTimes) {
      $("html,body").stop();
      loadTimes = 0;
      return;
    }
    loadTimes++;
    initialHeight = currentHeight;
    $("html,body").animate(
      {
        scrollTop: initialHeight
      },
      1000,
      continueToBottom
    );
  }
}

// 监听页面获取当前页面滚动方向
var scrollAction = "undefined";
document.onscroll = function() {
  if (scrollAction == "undefined") {
    scrollAction = window.pageYOffset;
  }
  var diffY = scrollAction - window.pageYOffset;
  scrollAction = window.pageYOffset;
  if (diffY < 0) {
    changeDirection("down");
  } else if (diffY > 0) {
    changeDirection("up");
  }
  if (getScrollTop() == 0) {
    changeDirection("down");
  }
  if (getScrollTop() + $(window).height() >= $(document).height()) {
    changeDirection("up");
  }
};

//改变按钮方向
function changeDirection(direction) {
  scrollDirection = direction;
  toggleButton.src = "/backend/image/" + direction + "_button_icon.png";
}
